<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['id']"/>
        </a-form-item>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="项目"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-select allow-clear placeholder="请选择项目名称"
                        v-decorator="['project',{rules: [{required: true, min: 1, message: '请选择项目名称！'}]}]">
                <a-select-option v-for="item in projectList" :key="item.name" :value="item.id">{{ item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              style="width: 100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="语言"
              hasFeedback
            >
              <a-input placeholder="请选择语言"
                       v-decorator="['language', {rules: [{required: true, min: 1, message: '请选择语言！'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="渠道名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-input placeholder="请输入渠道名"
                       v-decorator="['channel_name',{rules: [{required: true, min: 1, message: '请输入渠道名！'}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              style="width: 100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="渠道API简称"
              hasFeedback
            >
              <a-input placeholder="请输入渠道API简称"
                       v-decorator="['channel_api', {rules: [{required: true, min: 1, message: '请输入渠道API简称！'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider/>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="OPS主机"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-input placeholder="请输入OPS主机IP"
                       v-decorator="['host_ip',{rules: [{required: true, min: 1, message: '请输入OPS主机IP！'}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="SSH端口"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-input placeholder="请输入SSH端口"
                       v-decorator="['ssh_port',{rules: [{required: false, message: '请输入SSH端口！'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="数据库名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-input placeholder="数据库名" v-decorator="['db_name', {rules: [{required: true}]}]"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              style="width: 100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="数据库端口"
              hasFeedback
            >
              <a-input placeholder="数据库端口"
                       v-decorator="['db_port', {rules: [{required: true, message: '数据库端口！'}]}]"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="数据库用户名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              hasFeedback
            >
              <a-input placeholder="请输入数据库用户名"
                       v-decorator="['db_user', {rules: [{required: true, message: '请输入数据库用户名！'}]}]"/>
            </a-form-item>
          </a-col>

          <a-col :md="12" :sm="24">
            <div v-show="passwordShow">
              <a-form-item
                style="width: 100%"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="数据库密码"
                hasFeedback
              >
                <a-input placeholder="请输入数据库密码"
                         v-decorator="['db_password']"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import config from '@/config/dict'
  import { getPage } from '@/api/main/project'
  import * as api from '@/api/main/channel'

  export default {
    name: 'sForm',
    data() {
      return {
        labelCol: {
          xs: { span: 10 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        title: '',
        passwordShow: true,
        projectList: [],
        confirmLoading: true,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法
      open(record) {
        this.visible = true
        if (record) {
          this.title = '编辑渠道'
        } else {
          this.title = '新增渠道'
          this.passwordShow = true
        }
        if (record) {
          setTimeout(() => {
            this.setFormItem(record)
          }, 100)
        }
        this.getProjectList()
      },
      setFormItem(record) {
        this.form.setFieldsValue(
          {
            id: record.id,
            project: record.project,
            channel_api: record.channel_api,
            channel_name: record.channel_name,
            language: record.language,
            db_user: record.db_user,
            host_ip: record.host_ip,
            ssh_port: record.ssh_port,
            db_port: record.db_port,
            db_name: record.db_name
          }
        )
        this.passwordShow = false
      },
      getProjectList() {
        getPage().then(res => {
          this.projectList = res.data.rows
          this.confirmLoading = false
        })
      },
      // [确认按钮]提交数据方法
      handleSubmit() {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
            this.message = config.msgDict[0]
            if (values.id) {
              this.message = config.msgDict[1]
            }
            if (!errors) {
              if (values.id) {
                this.message = config.msgDict[1]
                api.updateObj(values)
                  .then((res) => {
                    this._handle_response(res, values)
                  })
              } else {
                this.message = config.msgDict[0]
                api.addObj(values)
                  .then((res) => {
                    this._handle_response(res, values)
                  })
              }
            }
          }
        )
      },
      // 处理返回消息
      _handle_response(res, values) {
        if (!res.error) {
          this.$message.success(this.message['success'])
          this.handleCancel()
          this.$emit('ok', values)
        } else {
          this.$message.error(this.message['failed'] + res.error)
        }
      },
      // [取消按钮]重置数据,关闭弹框
      handleCancel() {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
